<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body {
            width: 100%;
            height: 100%;
        }

        .card{
            height: 250px;
            width: 350px;
            border-bottom: solid 1px red;
            position: relative;
            left: 3%;
        }

        .card img{
            height: 75%;
            width: 55%;
        }
        
        .cover{
            position: absolute;
            top: 5%;
        }
        .content{
            position: absolute;
            /* margin-left: 100px; */
            top: 35%;
            left: 55%;
        }

        .rate{
            margin-top:100px ;
            color: red;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="card" v-for="m in subjects">
            <div class="cover"><img :src="m.cover" alt=""></div>
            <div class="content">             
            <p>{{m.title}}</p>
                 评分：<span class="rate">{{m.rate}}</span>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                subjects: [
                    {
                        "rate": "8.2",
                        "cover_x": 2000,
                        "title": "罗小黑战记",
                        "url": "https://movie.douban.com/subject/26709258/",
                        "playable": true,
                        "cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2568288336.webp",
                        "id": "26709258",
                        "cover_y": 3208,
                        "is_new": false
                    },
                    {
                        "rate": "8.2",
                        "cover_x": 1500,
                        "title": "续命之徒：绝命毒师电影",
                        "url": "https://movie.douban.com/subject/30372377/",
                        "playable": false,
                        "cover": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2569548689.webp",
                        "id": "30372377",
                        "cover_y": 2222,
                        "is_new": false
                    },
                    {
                        "rate": "6.3",
                        "cover_x": 1500,
                        "title": "兰开斯特之王",
                        "url": "https://movie.douban.com/subject/30143698/",
                        "playable": false,
                        "cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2567131266.webp",
                        "id": "30143698",
                        "cover_y": 2222,
                        "is_new": true
                    },
                    {
                        "rate": "7.6",
                        "cover_x": 510,
                        "title": "卢斯",
                        "url": "https://movie.douban.com/subject/27195204/",
                        "playable": false,
                        "cover": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2562070353.webp",
                        "id": "27195204",
                        "cover_y": 755,
                        "is_new": true
                    },
                    {
                        "rate": "6.4",
                        "cover_x": 600,
                        "title": "大西洋",
                        "url": "https://movie.douban.com/subject/33413905/",
                        "playable": false,
                        "cover": "https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2564240166.webp",
                        "id": "33413905",
                        "cover_y": 800,
                        "is_new": true
                    },
                    {
                        "rate": "8.5",
                        "cover_x": 5594,
                        "title": "哪吒之魔童降世",
                        "url": "https://movie.douban.com/subject/26794435/",
                        "playable": true,
                        "cover": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2563780504.webp",
                        "id": "26794435",
                        "cover_y": 8268,
                        "is_new": false
                    }
                ]

            }
        })
    </script>
</body>

</html>